<template>
  <div class="list-content">
    <el-row type="flex" justify="space-between">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @submit.native.prevent
      >
        <el-form-item>
          <el-form-item v-if="hasFather">
            <div
              class="iconfont icon-return return-btn"
              @click="returnFun"
              title="返回"
            >
              {{ organizationName }}
            </div>
          </el-form-item>
          <!-- <el-select filterable @change="getList(1)" v-model="formInline.orgId">
            <el-option
              v-for="item in orgOptions"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId">
            </el-option>
          </el-select> -->
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="addPlan()">新增</el-button>
      </div>
    </el-row>
    <el-row class="overview-wrap" :gutter="40">
      <el-col :span="12">
        <div class="item-wrap">
          <p class="item-value color-5">{{ staticObj.total || 0 }}</p>
          <p class="item-title">制度总数</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="item-wrap">
          <p class="item-value color-6">
            {{ staticObj.lastUpdateTime || "-" }}
          </p>
          <p class="item-title">最近一次更新时间</p>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <!-- <el-table-column
      prop="shortName"
      label="业主单位">
      </el-table-column> -->
      <el-table-column prop="name" label="消防安全管理制度名称">
      </el-table-column>
      <el-table-column prop="createAccountName" label="创建人">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="updateAccountName" label="最近一次编辑人">
      </el-table-column>
      <el-table-column prop="updateTime" label="最近一次编辑时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="showDetail(scope.$index, scope.row)"
            type="text"
            size="small"
            >详情</el-button
          >
          <span class="dividing-line">|</span>
          <el-button
            @click="addPlan(scope.$index, scope.row)"
            type="text"
            size="small"
            >修改</el-button
          >
          <span class="dividing-line">|</span>
          <el-button
            @click="delPlan(scope.$index, scope.row)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <!-- 展开详情 -->
      <el-table-column type="expand" width="1">
        <template slot-scope="scope">
          <div class="detail-content ql-snow">
            <p><b>制度内容：</b></p>
            <div class="ql-editor" v-html="scope.row.systemContent"></div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="formInline.currentPageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="formInline.currentPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.currentPageTotal"
    >
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="安全制度维护"
      width="600px"
      top="10vh"
      v-if="dialogFalg"
      :visible.sync="dialogFalg"
      @close="closeDialog"
      v-dialogDrag
    >
      <edit-form :editInfo="editInfo" :closeDialog="closeDialog"></edit-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSafetManagementSystem,
  deleteSafetManagementSystemById
} from "@/api/safeRule";
import { getOrgList } from "@/api/org";
import util from "@/utils/util";
import editForm from "../Dialog/SafeRuleForm";

export default {
  name: "SafeRuleList",
  props: {
    organizationId: {
      required: false
    },
    organizationName: {
      default() {
        return "";
      }
    },
    hasFather: {
      type: Boolean,
      default() {
        return false;
      }
    },
    returnFun: {
      type: Function,
      default() {
        return () => {};
      }
    }
  },
  components: {
    editForm
  },
  data() {
    return {
      formInline: {
        orgId: this.$store.state.userinfo.org.id || "",
        name: "",
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      util: util,
      isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
      accountName: this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [], //表格数据
      staticObj: {}, //头部各状态个数统计
      loading: false,
      //orgOptions: [{organizationId: this.$store.state.userinfo.organizationIds,shortName: "业主单位"}],
      dialogFalg: false,
      editInfo: {} // 编辑对应的表单信息
    };
  },
  created: function() {
    //绑定下拉框
    /*getOrgList({queryType: 0}).then((data)=>{
          this.orgOptions.push.apply(this.orgOptions,data.data);
      })*/
    if (this.organizationId) {
      this.formInline.orgId = this.organizationId;
    }
    this.getList(1, 10, true);
  },
  methods: {
    sizeChange(_pageSize) {
      //页码切换
      this.getList(1, _pageSize);
    },
    pageChange(_pageIndex) {
      //翻页
      this.getList(_pageIndex);
    },
    getList(_pageIndex, _pageSize, refresh) {
      //获取列表
      if (_pageIndex) {
        this.formInline.currentPageIndex = _pageIndex;
      }
      if (_pageSize) {
        this.formInline.currentPageSize = _pageSize;
      }
      this.loading = true;
      getSafetManagementSystem({
        queryType: 1,
        orgId: this.formInline.orgId,
        pageIndex: this.formInline.currentPageIndex - 1,
        pageSize: this.formInline.currentPageSize
      }).then(result => {
        this.formInline.currentPageTotal = result.total;
        if (refresh) {
          this.staticObj.total = result.total;
          this.staticObj.lastUpdateTime =
            result.total > 0 ? result.data[0].updateTime : "";
        }
        this.tableData = result.data;
        this.loading = false;
      });
    },
    showDetail(index, row) {
      //展开详情
      const $table = this.$refs.mainTable;
      row.isExpand = !row.isExpand; //给row一个自定义展开状态
      $table.toggleRowExpansion(row);
    },
    addPlan(index, row) {
      this.dialogFalg = true;
      this.editInfo = row || { orgId: this.formInline.orgId };
    },
    delPlan(index, row) {
      let that = this;
      this.$confirm("确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        roundButton: true
      })
        .then(() => {
          deleteSafetManagementSystemById({ id: row.id }).then(res => {
            if (res.status === 200) {
              that.$message({
                type: "success",
                message: "删除成功!"
              });
              that.getList(1, 10, true);
            } else {
              that.$message.error(res.info);
            }
          });
        })
        .catch(() => {});
    },
    closeDialog(refresh) {
      this.dialogFalg = false;
      if (refresh) {
        this.getList(this.editInfo.id?'':1, 10, true);
      }
    }
  }
};
</script>
